<template>
  <a-row :gutter="16" style="height: 210px;">
    <a-col class="h-100" :span="8">
      <Echarts id="pieChart" :options="pieOption"></Echarts>
    </a-col>
    <a-col class="h-100" :span="16">
      <div class="file-line pdf">
        <div class="name">PDF文件：</div>
        <div class="column">
          <count-to class="count" :endVal="fileData.pdfTaskCount"></count-to>
          <span class="tit">检测任务数</span>
        </div>
        <div class="column">
          <count-to class="count" :endVal="fileData.pdfWordsCount+fileData.pdfOcrCount"></count-to>
          <span class="tit">检测字数</span>
        </div>
        <div class="column">
          <count-to class="count" :endVal="fileData.pdfImgCount"></count-to>
          <span class="tit">检测图片数</span>
        </div>
        <div class="column">
          <count-to class="count" :endVal="fileData.pdfViolationCount"></count-to>
          <span class="tit">违规风险</span>
        </div>
      </div>
      <div class="file-line word">
        <div class="name">Word文件：</div>
        <div class="column">
          <count-to class="count" :endVal="fileData.wordTaskCount"></count-to>
          <span class="tit">检测任务数</span>
        </div>
        <div class="column">
          <count-to class="count" :endVal="fileData.wordWordsCount+fileData.wordOcrCount"></count-to>
          <span class="tit">检测字数</span>
        </div>
        <div class="column">
          <count-to class="count" :endVal="fileData.wordImgCount"></count-to>
          <span class="tit">检测图片数</span>
        </div>
        <div class="column">
          <count-to class="count" :endVal="fileData.wordViolationCount"></count-to>
          <span class="tit">违规风险</span>
        </div>
      </div>
      <div class="file-line ppt">
        <div class="name">PPT文件：</div>
        <div class="column">
          <count-to class="count" :endVal="fileData.pptTaskCount"></count-to>
          <span class="tit">检测任务数</span>
        </div>
        <div class="column">
          <count-to class="count" :endVal="fileData.pptWordsCount+fileData.pptOcrCount"></count-to>
          <span class="tit">检测字数</span>
        </div>
        <div class="column">
          <count-to class="count" :endVal="fileData.pptImgCount"></count-to>
          <span class="tit">检测图片数</span>
        </div>
        <div class="column">
          <count-to class="count" :endVal="fileData.pptVideoCount"></count-to>
          <span class="tit">检测视频数</span>
        </div>
        <div class="column">
          <count-to class="count" :endVal="fileData.pptAudioCount"></count-to>
          <span class="tit">检测音频数</span>
        </div>
        <div class="column">
          <count-to class="count" :endVal="fileData.pptViolationCount"></count-to>
          <span class="tit">违规风险</span>
        </div>
      </div>
    </a-col>
  </a-row>
</template>
<script>
import Echarts from '@/components/echarts/index';
export default {
  components: {
    Echarts,
  },
  data() {
    return {
      fileData: {},
      pieOption: {
        color: ['#2B65F4', '#FFAC30', '#6AD1AC'],
        legend: {
          bottom: '1%',
          left: '0',
          orient: 'verticalAlign',
          icon: 'circle',
          itemWidth:3
        },
        series: [
          {
            type: 'pie',
            radius: ['55%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              formatter: '{count|{c}}\n\n{name|{b}}',
              rich: {
                count: {
                  fontSize: '24px',
                  color:'#131313',
                  fontWeight:'bold'
                },
                name: {
                  fontSize: '14px',
                  color:'#333',
                  marginTop: '5px'
                }
              }
              // formatter:(params) => {
              //     let _html = '';
              //     _html += '<div style="font-size:24px;color:#131313;font-weight:bold">'+params.data.value+'</div>';
              //     _html += '<div style="font-size:14px;color:#333333;margin-top: 5px">'+params.data.name+'</div>'
              //     return _html
              //   }
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },
    };
  },
  props: {},
  methods: {
    updateData(data){
      console.log(data);
      this.fileData = data;
      let pieData = [{
        name: 'Word文件',
        value: data.wordTaskCount
      },{
        name: 'PPT文件',
        value: data.pptTaskCount
      },{
        name: 'PDF文件',
        value: data.pdfTaskCount
      }];
      this.pieOption.series[0].data = pieData;
    }
  },
};
</script>
<style scoped lang="less">
.file-line{
  height: 60px;
  width: 100%;
  padding: 10px 10px 10px 26px;
  display: flex;
  align-items: center;
  & > div{
    width: 14%;
    .name{
      color: #131313;
      font-size: 14px;
    }
  }
  &.pdf{
    background-color: #f9fdfc;
  }
  &.word{
    background-color: #f7f9ff;
    margin-top: 10px;
  }
  &.ppt{
    background-color: #fffcf7;
    margin-top: 10px;
  }
  .column{
    .count{
      font-weight: bold;
      font-size: 16px;
      color: #3B3D3C;
    }
    .tit{
      color: #666666;
      font-size: 12px;
    }
  }
}
</style>
